axios({
  url:"http://localhost:8080/stars",
  method:"get"
}).then(result => {
  wantStarsUl = document.querySelector('.want-stars').querySelector('ul')
      const data = result.data.data
      wantStarsUl.innerHTML= ''

      data.forEach(star => {
        const liElement = document.createElement('li');
        const aElement = document.createElement('a');
        const imgElement = document.createElement('img');
        const h4Element = document.createElement('h4');

        imgElement.src = star.image;
        h4Element.textContent = star.name;

        aElement.href = `singer-detail.html?name=${encodeURIComponent(star.name)}`;
        aElement.appendChild(imgElement);
        aElement.appendChild(h4Element);

        liElement.appendChild(aElement);
        wantStarsUl.appendChild(liElement);

      })
})

const form =  document.querySelector('#wantForm')
  form.addEventListener('submit',(e) => {
    e.preventDefault();
    const formData = new FormData(form)
    const name = formData.get('name')
    const country = formData.get("country")
    const style = formData.get("style")
    const gender = formData.get("gender")
    const wantStar = {
      "name":name,
      "image":"",
      "country":country,
      "style":style,
      "gender":gender
    }
    axios({
      url:"http://localhost:8080/stars/want",
      method:"post",
      data:wantStar,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(result => {
      console.log(result.data.data);
      const data = result.data.data
      wantStarsUl = document.querySelector('.want-stars').querySelector('ul')
      console.log(wantStarsUl);
      wantStarsUl.innerHTML= ''

      data.forEach(star => {
        
        const liElement = document.createElement('li');
        const aElement = document.createElement('a');
        const imgElement = document.createElement('img');
        const h4Element = document.createElement('h4');

        imgElement.src = star.image;
        h4Element.textContent = star.name;

        aElement.href = `singer-detail.html?name=${encodeURIComponent(star.name)}`;
        aElement.appendChild(imgElement);
        aElement.appendChild(h4Element);

        liElement.appendChild(aElement);
        wantStarsUl.appendChild(liElement);
      })

    })

  })